<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>可乐-Blog 首页</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static_resources/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/static_resources/css/nav.css}">
    <link rel="stylesheet" th:href="@{/static_resources/css/checkBlog.css}">
</head>
<body>
<div class="navHeader">
    <!--        <div class="lalala">-->
    <div class="navLeft">
        <div class="logo">
            <img th:src="@{/static_resources/img/KeLe.png}" alt="">
            <div class="KeLeWorld">
                <img th:src="@{/static_resources/img/KeLeWorld.png}" alt="">
            </div>
        </div>
        <ul class="navUl">
            <li class="navLi border-B">
                <a class="A">首页</a>
            </li>
            <li class="navLi">
                <a class="A" th:href="@{../blogs/classify}">分类</a>
            </li>
            <li class="navLi">
                <a class="A" th:href="@{../manager/findAllUser}">管理系统</a>
            </li>
        </ul>
    </div>
    <div class="navF11">
        <div class="searchContainer">
            <div class="searchInput">全屏</div>
            <div class="glass">
                <img th:src="@{/static_resources/img/fullScreen.png}" alt="">
            </div>
        </div>
    </div>
    <div class="navMiddle">
        <div class="searchContainer">
            <a th:href="@{../to/toSearch}" class="searchInput">搜索</a>
            <div class="glass">
                <img th:src="@{/static_resources/img/fangdajing.png}" alt="">
            </div>
        </div>
    </div>
    <div class="navRight">
        <div class="workCenter">
            <a class="A" th:href="@{../to/toWrite}">
                创作中心
            </a>
        </div>
        <div class="vip">
            <a class="A" th:href="@{../to/toVipCenter}">会员中心</a>
        </div>
        <div class="headerPictureContainer">
            <div class="headerPicture headerPictureS">
                <th:block th:if="${session.User} ne null">
                    <img th:src="@{ ${session.User.src} }" alt="">

                </th:block>
            </div>
            <div class="message">
                <h3 class="messageName"></h3><!--后台数据*用户名-->
                <div class="vipTF">vip</div><!--vip-->
                <div class="line"></div><!--下划线-->
                <div class="FanFollowContent">
                    <div>
                        <div class="FanNumber">
                            <th:block th:if="${session.User} ne null">
                                <b th:text="${session.User.fans}"></b>
                            </th:block>
                        </div>
                        <div>
                            粉丝
                        </div>
                    </div>
                    <div>
                        <div class="FollowNumber">
                            <th:block th:if="${session.User} ne null">
                                <b th:text="${session.User.follow}"></b>
                            </th:block>
                        </div>
                        <div>
                            关注
                        </div>
                    </div>
                </div>
                <div class="personalCenterC">
                    <div class="personalCenter">
                        <a class="peopleCenter" th:href="@{../to/toPeopleCenter}">个人中心</a>
                    </div>
                    <div class="personalCenterIco">
                        <img th:src="@{/static_resources/img/icon7.png}" alt="">
                    </div>
                </div>
                <div class="personalCenterO">
                    <div class="personalCenter">
                        <a class="peopleCenter" th:href="@{../blogs/findBlogsByBlogger}">内容管理</a>
                    </div>
                    <div class="personalCenterIco">
                        <img id="OtherPicture" th:src="@{/static_resources/img/neirongguanli.png}" alt="">
                    </div>
                </div>
                <div class="personalCenterO">
                    <div class="personalCenter">
                        <a class="peopleCenter" th:href="@{../to/toMyCollect}">我的收藏</a>
                    </div>
                    <div class="personalCenterIco">
                        <img th:src="@{/static_resources/img/collection.png}" alt="">
                    </div>
                </div>
                <div class="personalCenterO">
                    <div class="personalCenter">
                        <a class="peopleCenter">退出登录</a>
                    </div>
                    <div class="personalCenterIco">
                        <img th:src="@{/static_resources/img/tuichu.png}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--        </div>-->
</div>
<div class="w homepageBox">
    <div class="allBlog" onclick="location.href=this.getAttribute('href')" th:each="blog:${pageInfo.list}" th:href="@{../blogs/findById(id=${blog.bid})}">
        <a class="block allBlogA">
            <h4 class="block allBlogH" th:text="${blog.title}"></h4>
        </a>
        <div class="allBlogContent">
            <div class="blogBoss">
                <div><div class="bolgBossS">博主：</div><div class="bolgBossName" th:text="${blog.blogger}"></div></div>
            </div>
            <div class="articleContent" th:utext="${blog.content}"></div>

            <div class="onclickThree">
                <div>点赞</div><div class="threeNumber" th:text="${blog.thumbsup}"></div>
                <div class="distance"></div>
                <div>评论</div><div class="threeNumber">100</div>
                <div class="distance"></div>
                <div>收藏</div><div class="threeNumber" th:text="${blog.collection}"></div>
            </div>
        </div>
    </div>
</div>
<div class="paging" >
    <a th:href="@{'checkBlog?pageNum=1'}"><button class="firstPage changeColor" >首页</button></a>

    <span th:if="${pageInfo.isHaveProPageNum}">
            <a th:href="@{'checkBlog?pageNum='+${pageInfo.proPageNum}}">
                <button class="goPrePage changeColor">上一页</button>
            </a>
        </span>
    <span th:unless="${pageInfo.isHaveProPageNum}">
            <a th:href="@{'checkBlog?pageNum='+${pageInfo.proPageNum}}">
                <button class="goPrePage" disabled style="cursor: no-drop">上一页</button>
            </a>
        </span>


    <span th:each="accs:${pageInfo.pageBar}">

            <span th:if="${pageInfo.pageNum} eq ${accs}">
                <a th:href="@{'checkBlog?pageNum='+${accs}}">
                    <button class="allPages" style="background-color: #00c4ff;color: #FFFFFF" th:text="${accs}" disabled></button>
                </a>
            </span>

            <span th:unless="${accs} eq ${pageInfo.pageNum}">
                <a th:href="@{'checkBlog?pageNum='+${accs}}">
                    <button class="allPages changeColor" th:text="${accs}"></button>
                </a>
            </span>

        </span>

    <span th:if="${pageInfo.isHaveNextPageNum}">
            <a th:href="@{'checkBlog?pageNum='+${pageInfo.nextPageNum} }">
                <button class="goNextPage changeColor" >下一页</button>
            </a>
        </span>
    <span th:unless="${pageInfo.isHaveNextPageNum}">
            <button class="goNextPage" disabled style="cursor: no-drop">下一页</button>
        </span>
    <span>
            <a th:href="@{'checkBlog?pageNum='+${pageInfo.pageNums} }">
                <button class="lastPage changeColor">尾页</button>
            </a>
        </span>
</div>
<script th:src="@{/static_resources/js/checkBlog.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/nav.js}" type="text/javascript"></script>
<script th:src="@{/static_resources/js/otherLogin.js}" type="text/javascript"></script>
</body>
</html>